<template>
  <div class="main_box">
    <div class="detail_wrap">
      <div class="tit">
        <h2>基础信息</h2>
        <el-button plain size="small" type="success" icon="fa fa-mail-forward" @click="returnList"> 返 回</el-button>
      </div>
      <div class="con">
        <ul>
          <li>
            <label class="label">拼团号:</label>
            <span>{{dataInfo.collageId}}</span>
          </li>
          <li>
            <label class="label">项目名称:</label>
            <span>{{dataInfo.itemName}}</span>
          </li>
          <li>
            <label class="label">医院名称:</label>
            <span>{{dataInfo.hospitalName}}</span>
          </li>
          <li>
            <label class="label">科室名称:</label>
            <span>{{dataInfo.officeName}}</span>
          </li>
          <li>
            <label class="label">医生名称:</label>
            <span>{{dataInfo.doctorName}}</span>
          </li>
          <li>
            <label class="label">最少成团人数:</label>
            <span>{{dataInfo.userMin}}</span>
          </li>
          <li>
            <label class="label">采样单价:</label>
            <span>{{dataInfo.itemPrice}}</span>
          </li>
          <li>
            <label class="label">总人数:</label>
            <span>{{dataInfo.userCount}}</span>
          </li>
          <li>
            <label class="label">采样时间:</label>
            <span>{{dataInfo.applyTime}}</span>
          </li>
          <li>
            <label class="label">截止时间:</label>
            <span>{{dataInfo.endTime}}</span>
          </li>
          <li>
            <label class="label">联系人:</label>
            <span>{{dataInfo.linkMan}}</span>
          </li>
          <li>
            <label class="label">联系电话:</label>
            <span>{{dataInfo.linkPhone}}</span>
          </li>

          <li>
            <label class="label">详细地址:</label>
            <span>{{dataInfo.address}}</span>
          </li>
          <li>
            <label class="label">备注:</label>
            <span>{{dataInfo.remark}}</span>
          </li>
          <li>
            <label class="label">拼团状态:</label>
            <span>{{formatCollageState(dataInfo.collageState)}}</span>
          </li>
          <li>
            <label class="label">退款状态:</label>
            <span>{{formatRefundState(dataInfo.refundState)}}</span>
          </li>
          <li>
            <label class="label">创建时间:</label>
            <span>{{dataInfo.createDate}}</span>
          </li>
          <li>
            <label class="label">拼团二维码:</label>
            <div id="qrCode" ref="qrCodeDiv"></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Map from "@/components/Map";
import CollageApi from "@/api/sample/collage";
import QRCode from 'qrcodejs2';

export default{
    data(){
        return {
          dataInfo: ""
        }
    },
    components:{
      Map
    },
    methods:{
      getData(){
        CollageApi.getData({id:this.$route.query.id})
          .then(res => {
            this.dataInfo = res.data;
            this.bindQRCode(this.$route.query.id)
        })
      },
      bindQRCode(id) {
        new QRCode(this.$refs.qrCodeDiv, {
          text: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxe7229f039bfe873b&redirect_uri=http%3A%2F%2Fh5.kanglailab.com%2FnucleicPage%2FnucleicGroup%2Fgroup_join.html&response_type=code&scope=snsapi_base&state='+id,
          width: 320,
          height: 320,
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
        })
      },
      formatDate(value){
        return this.$Utils.formatDate(value,'yyyy-MM-dd hh:mm:ss')
      },
      //拼团状态：(1.拼团中 2.已成团 3.已完成 4.已取消)
      formatCollageState(cellValue) {
        if (cellValue == 1){
          return "拼团中"
        }else if (cellValue == 2){
          return "已成团"
        }else if (cellValue == 3){
          return "已完成"
        }else if (cellValue == 4){
          return "已取消"
        }
      },
      //退款状态：(1.待退款 2.已退款 3.待退差价 4.已退差价)
      formatRefundState(cellValue) {
        if (cellValue == 1){
          return "待退款"
        }else if (cellValue == 2){
          return "已退款"
        }else if (cellValue == 3){
          return "待退差价"
        }else if (cellValue == 4){
          return "已退差价"
        }
      },
      returnList(){
        this.$store.dispatch('delView', this.$route);
        this.$router.push({path: '/sample/collageManagement'});
      }
    },
    mounted(){
      this.getData();
    }
}
</script>
<style lang="scss" src="@/assets/css/views/Detail.scss" scope>
</style>
